﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestSite.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">-->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/prettify.css">
    <link rel="stylesheet" type="text/css" href="css/metro.css">
    <link rel="stylesheet" type="text/css" href="css/site.css">
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.transit.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/prettify.js"></script>
    <script type="text/javascript" src="js/metro.js"></script>
    <script type="text/javascript" src="js/site.js"></script>
    <script type="text/javascript" src="js/google-analytics.js"></script>
    <style type="text/css">
        body
        {
            background: transparent url(img/bgmetro1.png);
        }
        .metro
        {
            /*width: 940px;
            overflow: hidden;*/
        }
        .metro-section
        {
            width: 810px !important;
        }
        #section1
        {
        }
        #section2
        {
        }
        #section3
        {
            width: 320px;
        }
        .metro-sections
        {
            width: 10000px;
        }
        .start
        {
            position: absolute;
            top: 60px;
        }
        #demo
        {
            position: absolute;
            left: 40px;
            top: 80px;
            bottom: 0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="pull-left" style="margin-top: 7px; margin-right: 5px;" href="/">
                    <img src="img/avatar474_2.gif" style="max-height: 16px;" />
                </a><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </a><a class="brand" href="/">Metro UI CSS</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="/">Main</a></li>
                        <li><a href="./tiles.html">Tiles</a></li>
                        <li class="active"><a href="./tiles.html-1">Tiles 1</a></li>
                        <li><a href="./images.html">Images</a></li>
                        <li><a href="./notices.html">Notices</a></li>
                        <li><a href="./buttons.html">Buttons</a></li>
                        <li><a href="./forms.html">Form</a></li>
                        <li><a href="./typography.html">Typography</a></li>
                        <li><a href="#" onclick="switchTheme()">Switch Theme</a></li>
                    </ul>
                    <ul class="nav pull-right">
                        <li><a href="https://github.com/olton/Metro-UI-CSS"><i class="icon-github-sign"></i>
                            Github</a></li>
                        <li><a href="https://github.com/olton/Metro-UI-CSS/zipball/master"><i class="icon-download">
                        </i>Download</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="demo">
        <p style="color: #fff;">
            This demo created by first contributor of MetroUI CSS <a href="https://github.com/oazabir">
                <b>oazabir</b></a>. In this demo: sortable tiles and tiles flow continuous horizontally
            while fitting vertically on the browser.
        </p>
        <div class="metro">
            <div class="metro-sections unselectable">
                <div class="metro-section">
                    <div class="tile tile-double tile-double-vertical bg-color-darken">
                        <div class="tile-icon-large">
                            <img src="img/tpb.png" />
                        </div>
                        <span class="tile-label">Pirates</span>
                    </div>
                    <div class="tile tile-double-vertical bg-color-yellow">
                        <div class="tile-icon-large">
                            <img src="img/Amazon.png" />
                        </div>
                        <span class="tile-label">Amazon</span>
                    </div>
                    <div class="tile bg-color-purple">
                        <div class="tile-icon-large">
                            <img src="img/Google%20Maps.png" />
                        </div>
                        <span class="tile-label">Maps</span>
                    </div>
                    <div class="tile bg-color-pink">
                        <div class="tile-icon-large">
                            <img src="img/Internet%20Explorer.png" />
                        </div>
                        <span class="tile-label">Internet Explorer</span>
                    </div>
                    <div class="tile tile-double tile-multi-content">
                        <div class="tile-content-main">
                            <div style="padding: 10px;">
                                <img src="img/Sunny.png" style="height: 96px; margin-right: 20px" class="place-left" />
                                <div style="margin-left: 115px; margin-top: 10px">
                                    <p style="font-size: 36px; margin-top: 0px;">
                                        12&#186;</p>
                                    <p style="font-size: 18px; margin-top: 0px;">
                                        Киев, Украина</p>
                                    <p style="font-size: 12px; margin-top: 5px">
                                        Солнечно, без осадков</p>
                                </div>
                            </div>
                            <span class="tile-label">Weather</span>
                        </div>
                        <div class="tile-content-sub bg-color-blueDark">
                            Ха! Привет я нижний блок
                        </div>
                    </div>
                    <div class="tile bg-color-orange">
                        <div class="tile-icon-large">
                            <img src="img/Libraries.png" />
                        </div>
                        <span class="tile-label">Libraries</span> <span class="tile-counter">10</span>
                    </div>
                    <div class="tile tile-double bg-color-green">
                        <div class="tile-icon-large">
                            <img src="img/Calendar.png" />
                        </div>
                        <span class="tile-label">Calendar</span> <span class="tile-counter">8 events</span>
                    </div>
                    <div class="tile tile-double">
                        <div class="tile-image">
                            <img src="img/windows-8-fish.jpg" />
                        </div>
                        <span class="tile-label">Desktop</span>
                    </div>
                    <div class="tile bg-color-pink">
                        <div class="tile-icon-large">
                            <img src="img/Internet%20Explorer.png" />
                        </div>
                        <span class="tile-label">Internet Explorer</span>
                    </div>
                    <div class="tile">
                        <div class="tile-icon-large">
                            <img src="img/Internet%20Explorer.png" />
                        </div>
                        <span class="tile-label">Internet Explorer</span>
                    </div>
                    <div class="tile bg-color-darken">
                        <div class="tile-icon-large">
                            <img src="img/Internet%20Explorer.png" />
                        </div>
                        <span class="tile-label">Internet Explorer</span>
                    </div>
                    <div class="tile bg-color-yellow">
                        <div class="tile-icon-large">
                            <img src="img/Internet%20Explorer.png" />
                        </div>
                        <span class="tile-label">Internet Explorer</span>
                    </div>
                    <div class="tile bg-color-orange">
                        <div class="tile-icon-large">
                            <img src="img/Internet%20Explorer.png" />
                        </div>
                        <span class="tile-label">Internet Explorer</span>
                    </div>
                    <div class="tile tile-triple bg-color-purple">
                        <div class="tile-icon-large">
                            <img src="img/Music.png" />
                        </div>
                        <span class="tile-label">Music</span>
                    </div>
                    <div class="tile">
                        <div class="tile-icon-large">
                            <img src="img/Android.png" />
                        </div>
                        <span class="tile-label">Android</span>
                    </div>
                    <div class="tile bg-color-orange">
                        <div class="tile-icon-large">
                            <img src="img/Remote%20Desktop.png" />
                        </div>
                        <span class="tile-label">Remote Desktop</span>
                    </div>
                    <!--
                    <div class="tile tile-triple-vertical bg-color-yellow">
                        <div class="tile-icon-large">
                            <img src="img/Music.png" />
                        </div>
                        <span class="tile-label">Music</span>
                    </div>
-->
                    <div class="tile tile-quadro tile-triple-vertical bg-color-red">
                    </div>
                    <div class="tile bg-color-orange">
                    </div>
                    <div class="tile bg-color-orange">
                    </div>
                    <div class="tile bg-color-orange">
                    </div>
                    <div class="tile tile-double bg-color-blue">
                        <div class="tile-icon-large">
                            <img src="img/Live%20SkyDrive.png" />
                        </div>
                        <span class="tile-label">Live SkyDrive</span>
                    </div>
                    <div class="tile bg-color-blueDark">
                        <div class="tile-icon-large">
                            <img src="img/Bluetooth.png" />
                        </div>
                        <span class="tile-label">Bluetooth</span>
                    </div>
                    <div class="tile bg-color-red">
                        <div class="tile-icon-large">
                            <img src="img/Control%20Panel.png" />
                        </div>
                        <span class="tile-label">Control Panel</span>
                    </div>
                    <div class="tile bg-color-green">
                        <div class="tile-icon-large">
                            <img src="img/Signal.png" />
                        </div>
                        <span class="tile-label">WiFi Settings</span>
                    </div>
                    <div class="tile bg-color-yellow">
                        <div class="tile-icon-large">
                            <img src="img/Computer%20alt%202.png" />
                        </div>
                        <span class="tile-label">My Computer</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            window.prettyPrint && prettyPrint();
        })

        $(".metro").metro();

        $(window).resize(reflow);

        $(function () {
            reflow();
        });

        function sortable() {
            $(".metro-section").sortable({
                connectWith: ".metro-section",
                revert: true,
                tolerance: "pointer",
                "opacity": 0.6,
                helper: "clone",
                stop: function (event, ui) {
                    reflow();
                }
            });
        }

        function reflow() {
            var metroSectionHeight = $(window).height() - $(".metro-sections").offset().top;

            $(".tile").each(function () {
                var tile = $(this);
                var pos = tile.offset();

                if (pos.top + tile.height() > metroSectionHeight) {
                    var mySection = tile.parents(".metro-section");
                    var nextSection = mySection.next();

                    tile.addClass("pushed");

                    if (nextSection.length > 0) {
                        nextSection.prepend(tile);
                        return window.setTimeout(reflow, 100);
                    }
                    else {
                        nextSection = $('<div class="metro-section" />');
                        nextSection.appendTo(mySection.parent());
                        nextSection.prepend(tile);
                        return window.setTimeout(reflow, 100);
                    }
                }
            });

            sortable();

            //var lastSection = $(".metro-section").last();
            //$(".metro-sections").width(lastSection.offset().left + lastSection.width());
        }

		
    </script>
    </form>
</body>
</html>
